<template>
	<div class="wrapper">
		<Title></Title>
		<div class="category">
			<ol class="tab">
				<li v-for="(item,i) in text" :key="i" :class="i===idx? 'activation':''" @click="toggle(i)">
					<p v-text="item"></p>
				</li>
			</ol>
			<div class="order-list">
				<ol ref="ol">
					<template v-if="idx === 0">
						<li v-for="(item,i) in beforePayment" :key="i">
							<div class="order-item" @click="linkOrderDetail(item)">
								<div class="item-box-top">
									<div class="top-left">
										<div class="order-data" v-text="`订单日期: ${item.addTime}`"></div>
										<div class="order-num" v-text="`订单编号: ${item.orderNumber}`"></div>
									</div>
									<div class="top-right">
										<span v-text="`等待付款`"></span>
									</div>
								</div>
								<div class="item-box-center" v-for="(list,j) in item.product[0]">
									<template v-if="j !== item.product[0].length-1">
										<img :src="list[0]" alt="">
										<span v-text="list[1]"></span>
									</template>
								</div>
								<div class="item-box-bottom">
									<span v-text="`共${item.product[0].length-1}件商品`"></span>
									<span v-text="`总金额:`"></span>
									<strong v-text="`${item.product[0][item.product[0].length-1]}元`"></strong>
								</div>
							</div>
							<div class="item-box-btn">
								<a href="javascript:;" v-text="`取消订单`" class="gray" @click="del(item,i)"></a>
								<a href="javascript:;" v-text="`立即付款`" @click="payment(item,i)"></a>
							</div>
						</li>
					</template>
					<template v-if="idx === 1">
						<li v-for="(item,i) in afterPayment" :key="i">
							<div class="order-item"  @click="linkOrderDetail(item)">
								<div class="item-box-top">
									<div class="top-left">
										<div class="order-data" v-text="`订单日期: ${item.addTime}`"></div>
										<div class="order-num" v-text="`订单编号: ${item.orderNumber}`"></div>
									</div>
									<div class="top-right">
										<span v-text="`已付款`"></span>
									</div>
								</div>
								<div class="item-box-center" v-for="(list,j) in item.product[0]">
									<template v-if="j !== item.product[0].length-1">
										<img :src="list[0]" alt="">
										<span v-text="list[1]"></span>
									</template>
								</div>
								<div class="item-box-bottom">
									<span v-text="`共${item.product[0].length-1}件商品`"></span>
									<span v-text="`总金额:`"></span>
									<strong v-text="`${item.product[0][item.product[0].length-1]}元`"></strong>
								</div>
							</div>
							<div class="item-box-btn">
								<a href="javascript:;" v-text="`申请退款`" class="gray" @click="del(item,i)"></a>
							</div>
						</li>
					</template>
				</ol>
			</div>
		</div>
		<menus></menus>
	</div>
</template>

<script type="text/ecmascript-6">
    import Title from "../components/Title";
    import menus from "../components/MenusSlot";
    import {createNamespacedHelpers} from "vuex";
    const {mapState,mapGetters} = createNamespacedHelpers("profile");
    export default {
        components: {//注册组件不然不能使用
            Title,menus
        },
	    data(){
          return {
              idx:0,
              text:["待付款","待收货","退换修"]
          }
	    },
	    computed:{
		    ...mapState(["list"]),
		    ...mapGetters(['beforePayment','afterPayment'])
	    },
        methods:{
            i(){
                this.idx = parseInt(this.$route.query.i);
            },
            toggle(i){
				this.idx = i;
            },
	        //取消订单
	        del(item,i){
                this.$store.dispatch("order/del",item.orderId);
	        },
	        //付款
            payment(item,i){
                this.$store.dispatch("order/payment",item.orderId);
            },
	        //跳转到订单详情
	        linkOrderDetail(item){
                item.link = true;//标识是从个人中心跳转到订单详情
                this.$store.commit("orderDetail/_setOrderDetail",item);
                this.$store.dispatch("orderDetail/getSite",item.siteId);
				this.$router.push({path:"/order/detail"})
	        },
	    },
        activated(){
            this.i();
        },
    };
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
	.category
		padding-top .9rem
		.tab
			border-bottom: .01rem solid #e0e0e0;
			position: fixed;
			width: 100%;
			background: #fff;
			z-index: 2;
			li
				display inline-block
				width 33.333333%
				text-align center
				p
					display: inline-block;
					padding: 0 .1rem;
					line-height: .6rem;
					font-size: .26rem
					color #555
					border-bottom 2px solid transparent
			.activation>p
				color #ff6700
				border-color #ff6700
		.order-list
			padding-top .6rem
			margin-bottom 1.2rem
			ol
				li
					border-top: .2rem solid #ececec;
					padding: 0 .32rem;
					font-size: .24rem;
					display: block;
					.order-item
						.item-box-top
							border-bottom: 0.01rem solid #ccc;
							padding: .3rem 0 .2rem;
							display flex
							justify-content space-between
							.top-left
								color #999
								.order-data
									font-size: .3rem;
									margin-bottom: .06rem;
									color #333
							.top-right
								display flex
								align-items center
								color: #ff5722;
								font-size: .3rem;
								line-height 100%
						.item-box-center
							padding: .2rem .1rem;
							text-align: left;
							display flex
							align-items center
							img
								width: 1rem;
								height: 1rem;
								margin-right: .1rem;
								display: block;
							span
								display: block;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								-webkit-box-flex: 1;
								-webkit-flex: 1 1 auto;
								flex: 1 1 auto;
								color: rgba(60,60,60,.87);
						.item-box-bottom
							padding: .2rem 0;
							text-align: right;
							border-top: 1px solid #ccc
							strong
								font-size: .3rem
								font-weight: 400
					.item-box-btn
						padding-bottom: .26rem;
						overflow: hidden;
						text-align: right;
						a
							display: inline-block;
							width: auto;
							height: auto;
							font-size: .29rem;
							padding: .14rem .2rem;
							border-radius: .04rem;
							margin-left: .2rem;
							line-height: normal;
							color: #ff6700;
							background: transparent;
							border: 1px solid #ff6700;
						.gray
							color: #999;
							border: 1px solid #999;
</style>